<template>
  <div class="list-container">
    <el-form class="search-panel" v-model="formData" :inline="true">
      <el-form-item label-width="120px" class="search-input" label="劳务公司名称：" prop="name" >
        <el-input v-model="formData.name" placeholder="劳务公司名称"></el-input>
      </el-form-item>
      <el-form-item label-width="120px" class="search-time" label="参与项目时间：" prop="startToEnd">
        <el-date-picker
          style="width:250px"
          v-model="formData.startToEnd"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row class="table-operate">
        <el-button type="primary" icon="el-icon-plus" @click="addCorp"> 新增劳务公司 </el-button>
        <!-- <el-button @click="importCorp">导入<i class="el-icon-upload2"/></el-button> -->
      </el-row>
      <el-table
          ref="filterTable"
          :data="tableData"
          style="width: 100%"
          >
        <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="80px"
            align="center"
            >
        </el-table-column>
        <el-table-column
            prop="name"
            label="劳务公司名称"
            min-width="150px"
            align="center"
            >
        </el-table-column>
        <el-table-column
            prop="teamNum"
            label="班组数量"
            min-width="80px"
            align="center"
            >
        </el-table-column>
        <el-table-column
            prop="personNum"
            label="人员数量"
            align="center"
            min-width="80px"
            >
        </el-table-column>
        <el-table-column
            prop="startTime"
            label="开始时间"
            align="center"
            min-width="120px"
            >
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="结束时间"
            align="center"
            min-width="120px"
            >
        </el-table-column>
        <el-table-column
            prop="operation"
            label="操作"
            align="center"
            min-width="160px"
            fixed="right"
            >
            <template slot-scope="scope">
                <el-button @click="addTeam(scope.row)" type="text" icon="el-icon-circle-plus-outline" v-if="!root">添加班组</el-button>
                <el-button @click="updateCorp(scope.row)" type="text" icon="el-icon-edit">修改</el-button>
                <el-button @click="deleteCorp(scope.row)" type="text" icon="el-icon-delete">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
            共{{ Math.ceil(total / pageSize) }}页/{{ total }}条数据
        </div>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import corp from'@/api/corp.js'
import accountApi from '@/api/account'

export default {  
  data(){
    return{
      formData:{
        name:'',
        startToEnd:[]
      },
      tableData:[],               //表格数据
      total:0,                  //数据总条数
      currentPage:1,             //当前页码
      pageSize:10,    //每页显示条目个数
      loading:false,
      projectId:localStorage.getItem('projectId'),
      root:false
    }
  },
  created(){
    this.fetchDataByUsername(this.$store.getters.name)
    this.getList();
  },
  methods:{
    // 根据id查询记录
    fetchDataByUsername(name) {
      accountApi.getByUsername(name).then(response => {
        console.log(123,response);
        if(response.data.userinfo.pid=='0'){
          this.root=true
        }
      })
    },
    importCorp(){
      this.$router.push({path:'/corporation/import'})
    },
    addCorp(){
      this.$router.push({path:'/corporation/add'})
    },
    updateCorp(row){
      this.$router.push({path:'/corporation/edit/'+row.serviceCorporationId})
    },
    addTeam(row){
      this.$router.push({path:'/team/add/',query:{corpId:row.serviceCorporationId}})
    },
    getList(){
      if(this.formData.startToEnd.length!=0){
        var endTime = this.formData.startToEnd[1]
        var startTime = this.formData.startToEnd[0]
      }
      const data = {
        currentPage:this.currentPage,
        endTime:endTime,
        id:this.projectId,
        pageSize:this.pageSize,
        searchInput:this.formData.name,
        startTime:startTime,
      }
      corp.listByProjectId(data).then(res=>{
        console.log('res',res);
        this.total=res.data.data.total
        this.tableData=res.data.data.records
        console.log(this.tableData);
      })
    }, 
    deleteCorp(row){
      this.$confirm(
          "确定要删除当前信息？",
          "删除确认",
          {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          }
      ).then(() => {
          console.log(row);
          corp.deleteFromProject(this.projectId,row.serviceCorporationId)
              .then(res=>{
                console.log(res);
                this.$message({
                type: "success",
                message: "已删除!",
                });
                this.$router.go(0);
              }).catch(error=>{
                console.log(error);
              })
      }).catch(()=>{
          this.$message({
              type:'info',
              message:'已取消删除'
          })
      })
    },
    updateCrop(row){
        console.log(row);
        this.$router.push({path:'/add'})
    },
    onSubmit(){
      this.getList()
    },
    //分页
    handleSizeChange(val){
      this.pageSize=val
      this.getList()
    },
    //currentPage当前页改变时
    handleCurrentChange(val) {
      this.currentPage=val
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
</style>